<template>
<!-- 单个塔吊统计页面 -->
  <div class="relative main">
    <div class="environment-header">
      <zz-back class="left" name="升降机监控" :title="backname" style="padding: 0"></zz-back>
      <div class="head-right right">
        <button class="button-line mr10" :class="{'active': type === 1}" @click="gopage('/liftMonitor/elevatorProjectRecord', 'day', id,  $route.query.name, projectId)">每日记录</button>
        <button class="button-line mr10" :class="{'active': type === 2}" @click="setDate(2)">每周统计</button>
        <button class="button-line mr20" :class="{'active': type === 3}" @click="setDate(3)">每月统计</button>
        <div class="date">
          <span>日期</span>
          <zz-date type="year" @change=handleChange v-if="type === 3"></zz-date>
          <zz-select v-if="type === 2"
            class="inline mr10"
            style="width: 115px"
            :border= true
            :options="{width: '100%'}"
            :option="dateList"
            :all = false
            optionColor = "#939997"
            :name = "dateName"
            @optionClick="changeDate">
          </zz-select>
        </div>
      </div>
    </div>
    <div class="record-box">
      <div class="pieChart">
        <div class="tit">
          报警： <span>{{alarmList.alarmcount}}</span> 次
        </div>
        <div style="width: 100%; height: 185px;padding-top:20px;" ref="totalWarn"></div>
      </div>
    </div>
    <div class="record-box">
      <div class="pieChart">
        <div class="tit">
          日均报警： <span>{{alarmList.avgAlarmcount}}</span> 次
        </div>
        <div style="width: 86%; height: 260px; margin: 0 auto;" ref="eachTowerDay"></div>
      </div>
    </div>
    <div class="record-box">
      <div class="pieChart">
        <div class="tit">
          单次最大载人： <span>{{alarmList.sigleMannedMax}}</span> 人
        </div>
        <div style="width: 86%; height: 260px; margin: 0 auto;" ref="eachTowerMaxP"></div>
      </div>
    </div>
    <div class="record-box">
      <div class="pieChart">
        <div class="tit">
          单次最大载重 <span>{{alarmList.sigleLoadMax}}</span> t
        </div>
        <div style="width: 86%; height: 260px; margin: 0 auto;" ref="eachTowerMaxH"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { elevatorAnalyze } from '../../../service/api.js'
import pie from './pie.js'
import bar from './bar.js'

export default {
  name: 'eachElevatorRecord',
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        type: 2, // 2 week 3 month
        id: '',  // 设备id
        projectId: '',
        code: '', // 塔吊编号名称如1#
        backname: '',
        date: '',
        startTime: '',
        endTime: '',
        dateList: {
          1: '本周',
          2: '上周'
        },
        dateName: '本周',
        totalWarn: null,
        totalWarnOption: null,
        totalWarnOptions: {
          data: [],
          color: ['#33cadb', '#60bbf2', '#48dba4', '#afe551', '#a3c3fe', '#cbf1f4', '#d4c054', '#d49054', '#54a8d4', '#546fd4', '#7e54d4', '#b154d4', '#5472d4'],
        },
        eachTowerDay: null,
        eachTowerDayOption: null,
        eachTowerMaxP: null,
        eachTowerMaxPOption: null,
        eachTowerMaxH: null,
        eachTowerMaxHOption: null,
        eachTowerDayOptions: {
          time: [],
          data: [],
          color: '#60bbf2'
        },
        eachTowerMaxPOptions: {
          time: [],
          data: [],
          color: '#33cadb'
        },
        eachTowerMaxHOptions: {
          time: [],
          data: [],
          color: '#48dba4'
        },
        alarmList: {
          alarmcount: 0,
          avgAlarmcount: 0,
          sigleMannedMax: 0,
          sigleLoadMax: 0
        }
      }
    },
    mounted () {
      this.type = this.$route.query.t === 'week' ? 2 : 3
      this.id = this.$route.query.Id
      this.projectId = this.$route.query.pjId || ''
      this.code = this.$route.query.name ? this.$route.query.name + '监控记录' : ''
      this.backname = this.code 
      this.setDate()
      this.getWarnList()
    },
    methods: {
      setDate (num) {
        if (num) {
          this.type = num
        }
        let mydate = new Date()
        if (this.type === 2) {
          // 周
          console.log('week')
          this.changeDate({key: '1'})
        } else {
          // 月
          console.log('month')
          let nowMonth = mydate.getFullYear() + '-' + (mydate.getMonth() + 1)
          this.handleChange(nowMonth)
        }
      },
      handleChange (state) {
        this.date = state
        if (!this.date) {
          this.date = this.$moment().format('YYYY-MM')
        }
        this.startTime = this.date + '-1'
        let endString = this.$moment(this.startTime).add('month',1).add('days',-1)
        this.endTime = this.$moment(endString).format("YYYY-MM-DD")
        this.getWarnList()
      },
      // 报警记录统计
      getWarnList () {
        elevatorAnalyze({
          deviceId: this.id, //设备id
          projectId: this.projectId,  // 项目id
          type: this.type,  // 1/2/3/4 日/周/月/年
          startTime: this.startTime,
          endTime: this.endTime
        }).then( res => {
          //console.log(res)
          this.alarmList.alarmcount = res.data.analyzeData.alarmcount
          this.alarmList.avgAlarmcount = res.data.analyzeData.dailyAvgAlarm
          this.alarmList.sigleMannedMax = res.data.analyzeData.sigleMannedMax  // 最大载人
          this.alarmList.sigleLoadMax = res.data.analyzeData.sigleLoadMax  // 最大载重
          // 报警记录统计饼状图
          this.totalWarnOptions.data = [
            {name: '超重', value: res.data.analyzeData.overweightcount || 0, label: {show:true}, labelLine: {show: true} },
            {name: '限位', value: res.data.analyzeData.limitlocationcount || 0, label: {show:true}, labelLine: {show: true}},
            {name: '人数', value: res.data.analyzeData.peoplecount || 0, label: {show:true}, labelLine: {show: true}},
            {name: '倾斜', value: res.data.analyzeData.anglecount || 0, label: {show:true}, labelLine: {show: true}}
          ]
          for (let i = 0; i < this.totalWarnOptions.data.length; i++) {
            if (this.totalWarnOptions.data[i].value == 0) {
              this.totalWarnOptions.data[i].labelLine.show = false
              this.totalWarnOptions.data[i].label.show = false
            }
          }
          this.totalWarnOptions.allAlarm =  res.data.analyzeData.alarmcount || 0
          // echarts图表
          // 累计报警
          this.totalWarnOption = pie(this.totalWarnOptions)
          this.totalWarn = this.$Echarts.init(this.$refs.totalWarn);
          this.totalWarn.setOption(this.totalWarnOption)
          // 日均报警
          this.eachTowerDayOptions.data = []
          this.eachTowerMaxPOptions.data = []
          this.eachTowerMaxHOptions.data = []
          this.eachTowerDayOptions.time=[]
          this.eachTowerMaxPOptions.time=[]
          this.eachTowerMaxHOptions.time=[]
          for (let i = 0; i < res.data.dailyData.length; i++) {
            if (this.type === 2) {
              switch(res.data.dailyData[i].time) {
                case '1':
                this.eachTowerDayOptions.time.push('周一')
                break
                case '2':
                this.eachTowerDayOptions.time.push('周二')
                break
                case '3':
                this.eachTowerDayOptions.time.push('周三')
                break
                case '4':
                this.eachTowerDayOptions.time.push('周四')
                break
                case '5':
                this.eachTowerDayOptions.time.push('周五')
                break
                case '6':
                this.eachTowerDayOptions.time.push('周六')
                break
                case '7':
                this.eachTowerDayOptions.time.push('周日')
                break
              }
              this.eachTowerMaxPOptions.time = this.eachTowerDayOptions.time
              this.eachTowerMaxHOptions.time = this.eachTowerDayOptions.time
              // this.eachTowerDayOptions.time.push(res.data.dailyData[i].time)
              // this.eachTowerMaxPOptions.time.push(res.data.dailyData[i].time)
              // this.eachTowerMaxHOptions.time.push(res.data.dailyData[i].time)
            } else {
              this.eachTowerDayOptions.time.push(res.data.dailyData[i].time)
              this.eachTowerMaxPOptions.time.push(res.data.dailyData[i].time)
              this.eachTowerMaxHOptions.time.push(res.data.dailyData[i].time)
            }
            this.eachTowerDayOptions.data.push(res.data.dailyData[i].alarmCount)
            this.eachTowerMaxPOptions.data.push(res.data.dailyData[i].maxPeople)
            this.eachTowerMaxHOptions.data.push(res.data.dailyData[i].maxWeight)
          }
          if (res.data.dailyData.length === 0 || !res.data.dailyData) {
            switch(this.type) {
              case 2:
              this.eachTowerDayOptions.time = ['周一','周二','周三','周四','周五','周六','周日']
              this.eachTowerMaxPOptions.time = this.eachTowerDayOptions.time
              this.eachTowerMaxHOptions.time = this.eachTowerDayOptions.time
              break
              case 3:
              this.eachTowerDayOptions.time = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
              this.eachTowerMaxPOptions.time = this.eachTowerDayOptions.time
              this.eachTowerMaxHOptions.time = this.eachTowerDayOptions.time
              break
            }
          }
          this.eachTowerDayOption = bar(this.eachTowerDayOptions)
          this.eachTowerDay = this.$Echarts.init(this.$refs.eachTowerDay);
          this.eachTowerDay.setOption(this.eachTowerDayOption)
          
          this.eachTowerMaxPOption = bar(this.eachTowerMaxPOptions)
          this.eachTowerMaxP = this.$Echarts.init(this.$refs.eachTowerMaxP);
          this.eachTowerMaxP.setOption(this.eachTowerMaxPOption)
         
          this.eachTowerMaxHOption = bar(this.eachTowerMaxHOptions)
          this.eachTowerMaxH = this.$Echarts.init(this.$refs.eachTowerMaxH);
          this.eachTowerMaxH.setOption(this.eachTowerMaxHOption)
        }).catch( err => {
          console.log(err)
        })
      },
      changeDate (item) {
        //console.log(item)
        let now = new Date()
        let n = now.getDay()
        if (n === 0) { n = 7}
        let startdate = now.getTime()-(n-1)*24*60*60*1000
        let enddate = now.getTime()+(7-n)*24*60*60*1000
        let laststartdate = startdate - 7*24*60*60*1000
        let lastenddate = enddate - 7*24*60*60*1000
        if(this.type === 2) {
          // 周
          switch(item.key) {
            case '1':
            // 本周
            this.startTime = this.$moment(startdate).format('YYYY-MM-DD')
            this.endTime = this.$moment(enddate).format('YYYY-MM-DD')
            break;
            case '2':
            // 上周
            this.startTime = this.$moment(laststartdate).format('YYYY-MM-DD')
            this.endTime = this.$moment(lastenddate).format('YYYY-MM-DD')
            break;
          }
        }
        this.getWarnList()
      },
      gopage (url, type, id, codename, pid) {
        this.$router.push({ path: url, query: { t: type, Id: id, code: codename, pjId: pid  }})
      },
    }
}
</script>

<style lang="scss" scoped>
  .main {
    background: #f8f9fb;
    padding-bottom: 44px;
    .environment-header{
      height: 60px;
      margin-bottom: 20px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
    }
  }
  .head-right {
    position: relative;
    z-index: 6;
    .date {
      display: inline-block;
      span {
        line-height: 30px;
      }
    }
    .active {
      color: #fff;
      background: $color;
    }
  }
  .record-box {
    width: 870px;
    margin: 0 auto 10px;
    background: #fff;
    .pieChart {
      padding: 20px 30px;
      .tit {
        font-size: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid #ddd;
        span {
          font-weight: bold;
        }
      }
      .pie-box {
        padding: 20px 0 30px 0;
        text-align: center;
      }
    }
  }
</style>

